<template>
	<view>
		<view class="tabNav" :class="classes()">
			<view class="tabItem"
				:class="[orderStaIndex == index ? 'active' : '']"
				v-for="(item,index) in orderStaArr"
				:key="index"
				@tap="switchStatus(index,item.id)"
			>{{item.name}}<view class="lineView"></view></view>
		</view>
		<view class="blockView" :style="{'margin-top':margTop + 'rpx'}" v-if="!pad"></view>
		<view class="blockView smMargTop" style="margin-top: 80rpx;"></view>
	</view>
</template>

<script>
	export default {
		props:{
			orderStaArr:Array,
			colType:{
				type:String,
				default:'orangeBg'
			},
			orderStaIndex:{
				type:Number,
				default:0
			},
			margTop:{
				type:Number,
				default:110
			}
		},
		computed:{
			classes(){
				return function(){
					return{
						'blueBg' : this.colType == 'blueBg',
						'deepBlueBg' : this.colType == 'deepBlueBg',
						'orangeBg' : this.colType == 'orangeBg',
						'lightYellBg' : this.colType == 'lightYellBg',
						'redBg' : this.colType == 'redBg'
					}
				}
			}
		},
		methods:{
			switchStatus(index,id){
				this.$emit('switchStatus',index,id)
			}
		}
	}
</script>

<style lang='scss' scoped>
	.tabNav{
		width: 100%;
		@include respTo(phone){
			height: $pss-height90;
		}
		@include respTo(pad){
			height: $pss-height60;
		}
		background: #fff;
		position: fixed;
		left: 0;
		/* #ifdef APP-PLUS */
			top: 0;
		/* #endif */
		/* #ifdef H5 */
			top: 70rpx;
		/* #endif */
		z-index: 100;
		display: flex;
		box-shadow: 0 5rpx 8rpx rgba(0,0,0,.02);
		justify-content: space-between;
		.tabItem{
			flex: 1;
			@include respTo(phone){
				height: $pss-height90;
				line-height: $pss-height90;
				font-size: $font-size30;
			}
			@include respTo(pad){
				height: $pss-height60;
				line-height: $pss-height60;
				font-size: $padSize16;
			}
			color:$sch-main9;
			text-align: center;
			position: relative;
			.lineView{
				position: absolute;
				display: none;
				border-radius: 20rpx;
				@include respTo(phone){
					width: 14%;
					left: 43%; 
					height: 10rpx;
					bottom: 10rpx;
				}
				@include respTo(pad){
					width: 12%;
					left: 44%; 
					height: 6rpx;
					bottom: 8rpx;
				}
			}
			&.active{
				font-weight: bold;
				@include respTo(phone){
					height: 90rpx;
					line-height: 90rpx;
					font-size: $font-size32;
				}
				@include respTo(pad){
					height: $pss-height60;
					line-height: $pss-height60;
					font-size: $padSize20;
				}
				.lineView{
					display: block;
				}
			}
		}
		&.orangeBg{
			.lineView{
				background:$pss-color-primary_1;
			}
			.tabItem.active{
				color: $pss-color-primary_1;
			}
		}
		&.blueBg{
			.lineView{
				background:$pss-color-blue;
			}
			.tabItem.active{
				color: $pss-color-blue;
			}
		}
		&.deepBlueBg{
			.lineView{
				background:$sch-mainBlue;
			}
			.tabItem.active{
				color: $sch-main1
			}
		}
		&.lightYellBg{
			.lineView{
				background:#fae24c;
			}
			.tabItem.active{
				color: $pss-text-color3;
			}
		}
		&.redBg{
			.lineView{
				background:#F12918;
			}
			.tabItem.active{
				color:#F12918 ;
			}
		}
	}
</style>